<template>
	<view class="container">
		<uni-data-picker ref="data-picker" style="width: 100%;" :readonly='readonly' placeholder="请选择所在地区" popup-title="请选择所在地区"
			:localdata="dataTree" v-model="valueTxt" @change="onchange" @nodeclick="onNodeClick"
			@popupopened="onpopupopened" :map="map" @popupclosed="onpopupclosed">
		</uni-data-picker>

	</view>
</template>


<script>
	import UniDataPicker from "../../uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue";
	import {
		get,
		post
	} from '@/api/api.js'
	export default {
		components: {
			UniDataPicker
		},
		props: {
			value: {
				type: Number,
				default: 0
			},
			readonly: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				valueTxt: this.value, //初始化为0，不让不显示数据
				map: {
					text: 'title',
					value: 'id'
				},
				dataTree: []
			}
		},
		watch: {
			value(val) {
				if (val) {
					this.valueTxt = this.value
				} else {
					this.valueTxt = 0
				}
			}
		},
		created() {
			this.getData()
		},
		methods: {
			getData() {
				get('/api/city/tree').then((res) => {
					if (res.code == 200) {
						this.dataTree = res.data
					}
				})
			},
			onNodeClick(e) {},
			onpopupopened(e) {

			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				let value = e.detail.value;
				this.$emit('input', value[value.length - 1].value)
			}
		}
	}
</script>

<style>
	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}

	.data-pickerview {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}
</style>
